<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travels In Tencent</title>
<style>
body { background:#054781; background:url(./resource/special/intencent_bg.jpg) #1A1A1A no-repeat center 0; color:#fff; font-family:Arial,'微软雅黑'; font-size:14px; }
.clock1 { position:absolute; top:50px; left:50px;  font-size:50px; background:#000; opacity:0.15; }
.clock2 { position:absolute; top:130px; left:10px;  font-size:30px; background:#000; opacity:0.15; }
.clock3 { position:absolute; top:140px; left:170px;  font-size:40px; background:#000; opacity:0.15; }
.clock4 { position:absolute; top:200px; left:50px; font-size:20px; background:#000; opacity:0.15; }
.clock5 { position:absolute; top:200px; left:130px; font-size:80px; background:#000; opacity:0.15; }
.clock6 { position:absolute; top:70px; left:250px; font-size:30px; background:#000; opacity:0.15; }
.clock7 { position:absolute; top:170px; left:320px; font-size:20px; background:#000; opacity:0.15; }

.info { text-align:center; margin:40px 0 0 0; font-style:italic; }

.news { position:absolute; top:10px; right:10px; text-align:right; opacity:0.4; }
.newsitem { margin:15px 0; }
</style>
</head>

<body>
<div class="clock clock1">23:44</div>
<div class="clock clock2">23:44</div>
<div class="clock clock3">23:44</div>
<div class="clock clock4">23:44</div>
<div class="clock clock5">23:44</div>
<div class="clock clock6">23:44</div>
<div class="clock clock7">23:44</div>

<div class="news" id="news"></div>

<div class="info">
    <div style="font-size:20px;">已经过去<span id="daycount" style="font-size:100px;"></span>天 </div>
    <div style="font-size:40px;"><span id="start"></span> <span style="font-size:20px;">~</span> <span id="today"></span></div>
    <div style="font-size:30px;"><span style="font-size:25px;">Travels In</span> Tencent.</div>
    <div style="font-size:16px;background:#fff;width:170px;margin:10px auto 0 auto;color:#24231F;border-radius:3px;" id="name">DICKQUAN / 全恒壮</div>
</div>

<script>
var now = new Date();
var start = new Date('2011-08-05');
var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

function get(e) {
    return document.getElementById(e);
}

function showDayCount() {
    var obj = get('daycount');
    obj.innerHTML = (today - start) / 86400000;
}

function showTimeInfo() {
    get('start').innerHTML = start.getFullYear() + '.' + (start.getMonth()  + 1)+ '.' + start.getDate();
    get('today').innerHTML = today.getFullYear() + '.' + (today.getMonth() + 1) + '.' + today.getDate();
}

showTimeInfo();
showDayCount();
window.onload = function() {
    updateClock();
};

function updateClock() {
    now = new Date();
    today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    var min = now.getMinutes();
    var hour = now.getHours();
    if (min < 10) {
        min = '0' + min;
    }
    if (hour < 10) {
        hour = '0' + hour;
    }
    nowString = hour + ':' + min;

    var clocks = document.getElementsByClassName('clock');
    for (i in clocks) {
        clocks[i].innerHTML = nowString;
    }

    setTimeout('updateClock()', 1000);
}

function getNews() {
    var script = document.createElement('script');
    script.src = '?m=get&a=163news&callback=showNews';
    var head = document.getElementsByTagName('head')[0];
    head.insertBefore(script, head.firstChild);
}

function showNews(data) {
    var html = '';
    for (var i = 0; i < 5; i++) {
        var fontsize = Math.round(12 + (Math.random() * 15));
        fontsize = 50 - data[i].title.length * 2;
        fontsize = Math.round(fontsize);
        if (fontsize < 14) {
            fontsize = 14;
        }
        html += '<div class="newsitem" style="font-size:' + fontsize + 'px;">' + data[i].title + '</div>';
    }

    get('news').innerHTML = html;
}

setTimeout('getNews()', 3000);
setInterval('getNews()', 30000);
</script>

</body>
</html>
